<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- 	<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-icon" @click="goBack">
					<image src="/static/back.png" mode="aspectFit"></image>
				</view>
				<text class="title">附近门店</text>
			</view>
		</view> -->

		<!-- 搜索框 -->
		<view class="search-section">
			<view class="search-box">
				<view class="search-icon">🔍</view>
				<input v-model="keyword" placeholder="搜索附近门店" class="search-input" />
				<view v-if="keyword" class="clear-btn" @click="keyword = ''">
					<text>✕</text>
				</view>
			</view>
		</view>

		<!-- 历史记录 -->
		<view class="history-section">
			<view class="history-header">
				<view class="history-icon">🕒</view>
				<text class="label">历史记录</text>
			</view>
			<view class="tags">
				<view v-for="(item,index) in history" :key="index" class="tag" @click="onHistoryClick(item)">
					<text>{{ item }}</text>
				</view>
			</view>
		</view>

		<!-- 门店列表 -->
		<scroll-view scroll-y class="shop-list">
			<view class="shop-card" v-for="(shop, index) in shops" :key="index" @click="selectShop(shop)">
				<view class="shop-header">
					<view class="shop-name-section">
						<view class="shop-icon">🏪</view>
						<text class="shop-name">{{ shop.name }}</text>
					</view>
					<view class="distance-badge">
						<text>{{ shop.distance }}</text>
					</view>
				</view>
				<view class="shop-rating">
					<uni-rate :value="shop.score" size="16" color="#ddd" activeColor="#ffd700" readonly />
					<text class="score-text">{{ shop.score }}分</text>
					<view class="divider"></view>
					<text class="sale">销量：{{ shop.sale }}</text>
				</view>
				<view class="shop-body">
					<image class="shop-img" :src="shop.img" mode="aspectFill"></image>
					<view class="shop-info">
						<view class="info-item">
							<view class="info-icon">🕒</view>
							<text>{{ shop.time }}</text>
						</view>
						<view class="info-item">
							<view class="info-icon">📍</view>
							<text>{{ shop.address }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部提示 -->
			<view class="footer-tips">
				<view class="tips-icon">✨</view>
				<text>暂无更多门店</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				keyword: "",
				history: ["飞飞汽车美容店", "飞飞汽修美容店", "汽修美容店"],
				shops: [{
						name: "车百事汽车生活馆",
						score: 4,
						sale: 556,
						distance: "556m",
						time: "周一至周五 早上8:00-晚上22:00",
						address: "山阳区人民路与解放路交叉口",
						img: "/static/shop.jpg"
					},
					{
						name: "车百事汽车生活馆",
						score: 4,
						sale: 556,
						distance: "556m",
						time: "周一至周五 早上8:00-晚上22:00",
						address: "山阳区人民路与解放路交叉口",
						img: "/static/shop.jpg"
					}
				]
			}
		},
		onLoad() {
			// 获取系统信息，计算状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			onHistoryClick(item) {
				this.keyword = item;
				// 可以在这里触发搜索逻辑
			},
			selectShop(shop) {
				uni.navigateTo({
					url: '/pages/car-repair-model/storedetail/storedetail'
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: linear-gradient(180deg, #f7f9fc 0%, #f0f4ff 100%);
	}

	/* 自定义导航栏 */
	.custom-nav {
		background: linear-gradient(90deg, #2a8cff 0%, #5aa9ff 100%);
		color: #fff;
		box-sizing: border-box;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	.nav-content {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 20rpx;
		gap: 16rpx;
	}

	.back-icon {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		transition: transform 0.15s ease, background 0.2s ease;
	}

	.back-icon:active {
		transform: scale(0.96);
		background: rgba(255, 255, 255, 0.28);
	}

	.back-icon image {
		width: 40rpx;
		height: 40rpx;
		filter: drop-shadow(0 2rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: 700;
		letter-spacing: 1rpx;
		color: #fff;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
	}

	.search-section {
		padding: 24rpx 20rpx;
		background: linear-gradient(90deg, #2a8cff 0%, #5aa9ff 100%);
	}

	.search-box {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 16rpx 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.search-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
		color: #6b7a90;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #1f2d3d;
		background: transparent;
		border: none;
	}

	.clear-btn {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background: #e8ecf0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #6b7a90;
	}

	.history-section {
		padding: 24rpx 20rpx;
		background: #ffffff;
		margin: 12rpx 20rpx;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.history-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.history-icon {
		font-size: 24rpx;
		margin-right: 12rpx;
	}

	.label {
		font-size: 28rpx;
		color: #1f2d3d;
		font-weight: 600;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;

		.tag {
			background: #f8f9fa;
			color: #6b7a90;
			font-size: 26rpx;
			padding: 12rpx 20rpx;
			border-radius: 20rpx;
			border: 1rpx solid #e8ecf0;
			transition: all 0.3s ease;
		}

		.tag:active {
			background: #2a8cff;
			color: #fff;
			border-color: #2a8cff;
		}
	}

	.shop-list {
		flex: 1;
		padding: 0 20rpx 20rpx;
	}

	.shop-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		}

		.shop-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.shop-name-section {
				display: flex;
				align-items: center;
				flex: 1;
			}

			.shop-icon {
				font-size: 24rpx;
				margin-right: 12rpx;
			}

			.shop-name {
				font-size: 32rpx;
				font-weight: 700;
				color: #1f2d3d;
			}

			.distance-badge {
				background: rgba(42, 140, 255, 0.1);
				color: #2a8cff;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 26rpx;
				font-weight: 600;
			}
		}

		.shop-rating {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			gap: 12rpx;

			.score-text {
				color: #ff6600;
				font-size: 26rpx;
				font-weight: 600;
			}

			.divider {
				width: 1rpx;
				height: 20rpx;
				background: #e8ecf0;
			}

			.sale {
				font-size: 26rpx;
				color: #6b7a90;
			}
		}

		.shop-body {
			display: flex;
			margin-top: 20rpx;
			gap: 20rpx;

			.shop-img {
				width: 200rpx;
				height: 140rpx;
				border-radius: 16rpx;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.08);
			}

			.shop-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.info-item {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;

					.info-icon {
						font-size: 20rpx;
						margin-right: 8rpx;
						color: #6b7a90;
					}

					text {
						font-size: 26rpx;
						color: #6b7a90;
						line-height: 1.4;
					}
				}
			}
		}
	}

	.footer-tips {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #9ca3af;
		font-size: 26rpx;
		margin: 40rpx 0;
		padding: 32rpx;
	}

	.tips-icon {
		font-size: 32rpx;
		margin-bottom: 12rpx;
		opacity: 0.6;
	}
</style>